<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> -->
    <script src="./echatrs.main.js"></script>
</head>

<body>
    <div class="id" style="width: 800px;height: 400px;margin: auto;">
        <div id="main" style="width: 100%;height: 100%;"></div>
    </div>
</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            name:'X轴',
            nameLocation:'center',
            nameGap:45,
            nameTextStyle:{
                color:'red',
                fontSize:30,
            },
            axisLine: {
                // 箭头只在末端显示 none不显示 arrow两边都显示
                symbol: ['none', 'arrow']
            },
            axisLabel: {
                // 刻度标签是否显示
                show: true,
                // 刻度标签朝内还是朝外
                inside: false,
                // 刻度标签与轴线直线的距离
                margin: 30,
                color: 'red'
            },
            axisTick: {
                length: 15,
                lineStyle: {
                    color: 'blue'

                }
            }
        },
        yAxis: {
            type: 'value',
            // 主体名称
            name: 'y轴',
            // 显示位置
            nameLocation: 'center',
            nameGap: 40,
            nameTextStyle: {
                color: 'blue',

                // fontStyle: 'normal',
                // fontWeight: 'blod',
                fontSize: 30,
            },
            axisLabel: {
                // 刻度标签是否显示
                show: true,
                // 刻度标签朝内还是朝外
                inside: false,
                // 刻度标签与轴线直线的距离
                margin: 20,
                color: 'red'
            },
            // 轴线
            axisLine: {
                // 坐标轴线是否显示
                show: true,
                // 箭头只在末端显示 none不显示 arrow两边都显示
                symbol: ['none', 'arrow'],
                lineStyle: {
                    width: 3,
                    color: 'red',
                    type: 'dotted'
                }
            },
            // 刻度
            axisTick: {
                // 刻度显示
                show: true,
                // 刻度朝内朝外
                inside: true,
                // 刻度的长度
                length: 15,
                // 刻度可以设置的颜色
                lineStyle: {
                    color: 'red',

                }
            }

        },
        series: [
            {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
            },
            {
            data: [150, 290, 14, 180, 235, 347, 560],
            type: 'line'
            },
            {
            data: [190, 210, 140, 150, 135, 367, 460],
            type: 'line'
            },
            {
            data: [160, 250, 24, 448, 195, 187, 290],
            type: 'bar'
            },
            {
            data: [60, 150, 104, 348, 295, 387, 290],
            type: 'bar'
            },
            {
            data: [60, 150, 104, 348, 295, 387, 290],
            type: 'pie',
            width:100,
            height:100,
            top:0,
            left:700,
            labelLine:{show:false}
            },
    ]
    };

    option && myChart.setOption(option);
</script>

</html>